<!--饿了么会员卡详情-->
<template>
  <div class="members">
    <div class="privilege">
      <p class="privilege_p1">
        为账户<span class="span">{{ account }}</span
        >购买会员
      </p>
      <van-cell value="会员说明" is-link to="Members_said">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <van-tag type="danger">会员特权</van-tag>
        </template>
      </van-cell>
      <div class="one">
        <div class="divone">
          <img
            src=""
            alt=""
          />
          <h4>减免配送费</h4>
          <p>每月减免三十单，每日可减免3单，每单最高减4元</p>
          <p>蜂鸟专送专享</p>
        </div>
        <div class="divtwo">
          <img
            src=""
            alt=""
          />
          <h4>减免配送费</h4>
          <p>每月减免三十单，每日可减免3单，每单最高减4元</p>
          <p>蜂鸟专送专享</p>
        </div>
      </div>
      <!-- 第二部分 -->
      <van-cell-group class="mmeber_members4">
        <van-cell>
          <div>
            <span>开通会员</span>
          </div>
        </van-cell>
        <van-cell>
          <div class="mmeber_members5">
            <span>1个月<span class="mmeber_span">￥20</span></span>
            <div>
              <button @click="paymenthyt" class="mmeber_members5_btn">
                购买
              </button>
            </div>
          </div>
        </van-cell>
      </van-cell-group>
      <van-cell-group>
        <van-cell class="boottom_duihuan1" @click="tdc_rjh1" is-link to="Cardnumber">
          <span id="shiyong_h">兑换会员</span>
          <div>
            <span>使用卡号密码</span>
            <i class="iconfont icon-youjiantou1 right1"></i>
          </div>
        </van-cell>
      </van-cell-group>
      <van-cell-group>
        <van-cell class="boottom_duihuan1" is-link to="Record">
          <span id="goumai_h">购买记录</span>
          <div>
            <span>开发票</span>
            <i class="iconfont icon-youjiantou1 right1"></i>
          </div>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
export default {
  name: "Members",
  data: function () {
    return {
      account: "用户",
    };
  },
  created() {
    this.$axios
      .post("http://localhost:8888/login/select", {
        account: localStorage.getItem("account"),
      })
      .then((res) => {
        this.account = res.data.msg.account;
      })
      .catch((err) => console.log(err));
  },
  methods: {
    paymenthyt(){
      console.log(888);
      this.$router.push({name:"Buy"})
    }
  }
};
</script>

<style lang="less">
html {
  background-color: #f5f5f5;
}
.members {
  .privilege {
    overflow: hidden;
    .privilege_p1 {
      line-height: 46.67px;
      font-size: 14px;
      margin-left: 20px;
      color: #666;

      .span{
        color: black;
      }
    }
    .one {
      background-color: #fff;
      border: 1px solid #f5f5f5;
      padding-left: 16px;
      .divone {
        height: 91px;
        padding-top: 20px;
        box-sizing: border-box;
        img {
          float: left;
        }
        h4 {
          float: left;
          margin-left: 10px;
        }
        p {
          float: left;
          margin-left: 10px;
          font-size: 10px;
          color: #999;
        }
      }
      .divtwo {
        border-top: 1px solid #f5f5f5;
        height: 91px;
        padding-top: 20px;
        box-sizing: border-box;
        img {
          float: left;
        }
        h4 {
          float: left;
          margin-left: 10px;
        }
        p {
          float: left;
          margin-left: 10px;
          font-size: 10px;
          color: #999;
        }
      }
    }
    .mmeber_members4 {
      margin-top: 10px;
      font-size: 16px;
    }
    .mmeber_members5 {
      .mmeber_members5_btn {
        width: 60px;
        height: 26.792px;
        margin: 0.667px;
        padding: 0;
      }
      span {
        font-size: 16px;
      }
      div {
        float: right;
        button {
          background-color: #fff;
          color: #ff6600;
          border: 1px solid #ff6600;
          border-radius: 4px;
          padding: 1px 15px;
        }
      }
      .mmeber_span {
        color: #ff6600;
        font-weight: 700;
      }
    }
    .boottom_duihuan1 {
      margin-top: 15px;
      div {
        float: right;
        color: #999999;
        font-size: 14px;
      }
    }
    #shiyong_h,
    #goumai_h {
      color: #000;
      font-size: 16px;
    }

    img {
      width: 40px;
      height: 42px;
    }
  }
}
</style>